<!-- 概览页面 -->
<template>
  <div class="overview-container">
    <div class="overview-header loc-start">{{ $t('tool.modelManage.modelingStatistics') }}</div>
    <div class="overview-content">
      <div
        class="overview-item"
        v-for="item in model_statistics"
        :key="item.id"
      >
        <div class="item-value loc-center">{{ statisticData[item.attr] }}</div>
        <div class="item-text loc-center">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model_statistics: [
        {
          id: 1,
          name: "模型大类",
          attr: "category_num",
        },
        {
          id: 2,
          name: "模型总数",
          attr: "model_count",
        },
        {
          id: 3,
          name: "模型组总数",
          attr: "category_group_count",
        },
      ],
      statisticData: {
        category_num: 5,
        model_count: 10,
        category_group_count: 15,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.overview-container {
  width: 100%;
  height: 30%;
  border-radius: 8px;
  border: 1px solid var(--ui-border-color-base);
  box-sizing: border-box;
  .overview-header {
    width: 100%;
    height: 30%;
    color: #000;
    font-size: 28px;
    letter-spacing: 5px;
    font-weight: 500;
    padding-left: 2%;
    box-sizing: border-box;
  }
  .overview-content {
    width: 100%;
    height: 70%;
    display: flex;
    align-items: center;
    .overview-item {
      width: 25%;
      height: 100%;
      .item-value {
        width: 100%;
        height: 75%;
        color: #000;
        font-size: 48px;
        letter-spacing: 2px;
        font-weight: bold;
      }
      .item-text {
        width: 100%;
        height: 25%;
        color: #000;
        font-size: 24px;
        letter-spacing: 2px;
        font-weight: 500;
      }
    }
  }
}
</style>